<!--
 * @Author: your name
 * @Date: 2021-07-17 18:30:43
 * @LastEditTime: 2021-07-18 16:16:02
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \undefinedd:\练习\vue计算器.html
-->
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgb(231, 231, 231);
      }
      .calculator {
        display: grid;
        grid-template-areas:
          "num-0 num-0 num-0 num-0"
          "num-10 num-11 num-18 num-13"
          "num-7 num-8 num-9 num-14"
          "num-4 num-5 num-6 num-15"
          "num-1 num-2 num-3 num-12"
          "num-19 num-16 num-17 num-17";
        grid-gap: 15px;
        grid-template-columns: repeat(4, 55px);
        grid-template-rows: repeat(6, 55px);
        box-shadow: -5px -5px 15px -5px white,
          5px 5px 15px -5px rgba(0, 0, 0, 0.15);
        border-radius: 15px;
        padding: 25px;
      }
      .calculator > button {
        text-align: center;
        font-family: "fangsong";
        font-weight: bold;
        font-size: 22px;
        border: none;
        color: rgb(114, 114, 114);
        background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.1), white);
        box-shadow: -2px -2px 8px -2px white,
          2px 2px 8px -2px rgba(0, 0, 0, 0.15);
        border-radius: 20px;
      }
      .calculator > button:active {
        box-shadow: inset -2px -2px 8px -2px white,
          inset 2px 2px 8px -2px rgba(0, 0, 0, 0.15);
      }
      div > span {
        color: rgb(70, 70, 70);
        padding: 0 8px 0 0;
        font-size: 25px;
        line-height: 55px;
        text-align: right;
        box-shadow: inset -2px -2px 10px -2px white,
          inset 2px 2px 10px -2px rgba(0, 0, 0, 0.15);
        overflow-x: auto;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="calculator">
        <span style="grid-area: num-0">{{result}}</span>
        <button @click="entry('1')" style="grid-area: num-1">1</button
        ><button @click="entry('2')" style="grid-area: num-2">2</button
        ><button @click="entry('3')" style="grid-area: num-3">3</button
        ><button @click="entry('4')" style="grid-area: num-4">4</button
        ><button @click="entry('5')" style="grid-area: num-5">5</button
        ><button @click="entry('6')" style="grid-area: num-6">6</button
        ><button @click="entry('7')" style="grid-area: num-7">7</button
        ><button @click="entry('8')" style="grid-area: num-8">8</button
        ><button @click="entry('9')" style="grid-area: num-9">9</button>
        <button @click="allClear" style="grid-area: num-10">AC</button
        ><button @click="different" style="grid-area: num-11">±</button
        ><button @click="entry('*')" style="grid-area: num-12">×</button
        ><button @click="entry('/')" style="grid-area: num-13">÷</button
        ><button @click="entry('+')" style="grid-area: num-14">+</button
        ><button @click="entry('-')" style="grid-area: num-15">-</button
        ><button @click="entry('.')" style="grid-area: num-16">.</button
        ><button @click="getResult()" style="grid-area: num-17">=</button
        ><button @click="percentage" style="grid-area: num-18">%</button
        ><button @click="entry('0')" style="grid-area: num-19">0</button>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          result: "0",
          //是否输入了小数点
          isDot: false,
          //是否输入了运算符
          isOperator: false,
          //是否有了第一次输入
          isFirst: false,
        },
        methods: {
          //该方法返回当前是否输入的是运算符（加减乘除），是则返回真，反之
          operator(num) {
            //indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现，则该方法返回 -1。
            return ["+", "-", "*", "/"].indexOf(num) > -1;
          },
          // 输入
          entry(num) {
            //是否是第一次输入,且第一次输入的不能运算符
            if (this.result == "0" && !this.operator(num)) {
              //第一次就输入小数点
              if (num == ".") {
                this.result += ".";
                //已输入小数点，次数用完了，只有输入运算符号后才能再次输小数点
                this.isDot = true;
              } else {
                this.result = num;
              }
              this.isFirst = true;
              return;
            }
            // 有了第一次输入,继续输入其它数字
            if (!this.operator(num)) {
              //如果小数点输入次数用完就不能再输入，只有输入运算符号后才能再次输小数点
              if (num == "." && this.isDot) {
                //直接返回
                return;
              }
              // 如果小数点输入次数没用完,程序可以继续往下走，不直接return
              if (num == ".") {
                this.isDot = true;
                //输入点后不能直接输入运算符,先把isOperator该为true
                this.isOperator = true;
              } else {
                //如果输入的是数字，证明还没输入运算符
                this.isOperator = false;
              }
              // 拼接输入字符
              this.result += num;
            }
            //输入运算符(如果连第一次都没输入就输入运算符那就当你第一次输入的是0了)
            if (this.operator(num) && !this.isOperator) {
              // 拼接输入的运算符
              this.result += num;
              //可以再次输入小数点
              this.isDot = false;
              //已输入运算符，下一次输入不能再是运算符
              this.isOperator = true;
            }
          },
          // 结果 ＝
          getResult() {
            //eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。
            //toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。
            //parseFloat() 函数可解析一个字符串，并返回一个浮点数。
            //toString() 方法可把一个 Number 对象转换为一个字符串，并返回结果。
            this.result = parseFloat(eval(this.result).toFixed(12).toString());
            this.isDot = false;
            this.isOperator = false;
          },
          // 清空 AC
          allClear() {
            this.result = "0";
            this.isDot = false;
            this.isFirst = false;
            this.isOperator = false;
          },
          // 正负 ±
          different() {
            //如果还没第一次输入或者运算符已经输入了，都直接取消返回
            if (!this.isFirst || this.isOperator) {
              return;
            }
            // 符合条件，将乘一个 -1
            this.result += "* -1";
            // 返回新结果
            this.getResult();
          },
          // 百分比  %
          percentage() {
            //如果还没第一次输入或者运算符已经输入了，都直接取消返回
            if (!this.isFirst || this.isOperator) {
              return;
            }
            // 符合条件，将乘一个 0.01
            this.result += "* 0.01";
            // 返回新结果
            this.getResult();
          },
        },
      });
    </script>
  </body>
</html>
